<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        p{
            font-size: 16px;
            background-color:orange;
            /*font-family: SimSum;选中是宋体*/
            font-weight:700;
            /*文字加粗，400普通，700就是normol 粗一点，900最粗*/
            font-style: oblique;
            /*文字倾斜*/
            text-indent: 30px;
            /*首行缩进*/
            letter-spacing: 20px;
            /*词间距*/
            word-spacing: 30px;
            /*英文的字间距*/
            line-height: 50px;
            /*文本高*/
            text-align: center;
            /*text-align: 这个是css，在元素中加align少用，那个是html;*/

        }
        a{
            text-decoration: none;
            /*去掉下划线*/
        }
        p{
            text-decoration: line-through;
            /*穿过*/
            /*text-decoration: overline;*/
            /*上划线*/
            text-transform: uppercase;
            /*英文全大写*/
            /*text-transform: lowercase;*/
            /*英文全小写*/
            text-shadow: 4px 4px 4px #ccc;
            /*文字阴影  1，水平值 2，垂直值 3，模糊值 4，颜色*/
        }
        .box1{
            width: 500px;
            height: 300px;
            border: 1px solid;

            /*background: 各种用法;*/

            background-image:url(../css2/51job表单.JPG);
            /*平铺方式*/
            background-repeat: no-repeat;
            /*background-repeat: no-repeat;*/
            /*background-repeat: repeat-y;*/
            /*background-repeat: repeat-x;*/
            /*不平铺*/
            /*还有左,右平铺*/

            /*background-position: bottom left;*/
            /*图片的下右，right右，bottom下，center中。*/

            background-position: 50px 100px;
            /*定位图片位置*/
            /*x轴50像素，Y轴100像素。还有可以用百分比*/


            background-size: 30% 20%;
            /*background-size: 100%;*/
            /*背景图大小*/
            /*百分比作用的是容器*/
            /*光写100%后面自动式auto*/
            /*background-size: cover;*/

            /*background-size: contain;*/
            /*保持图片本身的比列进行填充 */

            /*background: #cccccc url("") no-repeat;*/
            /*这个是简写，有些浏览器不兼容。
            颜色 路径 平铺方式 是否固定 位置 这个是顺序*/
            /*background-size: 是单独列出来的，需要重新写;*/

            /*border      的用法*/
            /*border 边框大小 边框线条 边框颜色*/
            /*border: 3px solid red;*/
            /*border: 3px dashed green;*/
            /*长方形虚线*/
            /*border: 4px dotted blue;*/
            /*正方形虚线*/
            /*border: 5px double blue;*/
            /*双实线*/

            border-right:  3px double red;
            /*border-right: 这个控制的是右边框的大小虚线颜色;*/

            /*outline: 3px solid red;*/

            /*outline相当于border不会占用像素*/
            /*占用像素后，其他字体将会被挤开。
            不占用像素时，边框如果很大就会把那个字覆盖*/
            /*但是outline不能控制四个边框，border可以控制四个边框*/


        }
        ul li{
            /*list-style: none;*/
            /*隐藏前面的默认小圆点*/

            list-style: square;
            /*无序裂变前面变成小方块*/


            /*dashed虚线  dotted点线  solid实线*/
        }

        .way1{
            background-image:url(logo_db.png);
            width: 154px;
            height: 30px;
            outline: 1px solid blue;
            /*加一个不占用像素的边框*/

            overflow: hidden;
            /*超出隐藏*/

        }
        .way1 a{
            line-height: 200px;
            display:block;
            /*display: block;*/
            /*行内元素变为块级元素
            不变为块级元素就点不到*/
        }

        .way2{
            background-image: url("logo_db.png");
            width: 154px;
            height: 30px;
            overflow: hidden;
        }
        .way2 a{
            text-indent: -100px;
            /*文本左移动*/
            display: block;
        }
        .AA{
            width: 154px ;
            height: 30px;
            /*background: url("logo_db.png");*/
        }
        .AA a{
            font-family: Webdings;
            /*line-height: 200px;*/
            display: block;
        }
        .pre{
            background-image: url("235110-140Z309361370.jpg");
            width: 160px;
            height: 195px;
            /*outline: 1px solid red;*/
            background-position: -313px -37px;
        }
        /*.pre:visited{*/
            /*background-image: url("logo_db.png");*/
        /*}   没有起作用*/
        .pre:hover{
            background-position: -782px -274px;
        }
        .pre:active{
            /*background-position: -666px -222px;*/
            background-image: url("51job表单.JPG");
            /*链接另外一个图*/
            /*background-size: cover;*/


        }

        .rad{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius:10% ;
        }
        /*制作圆角*/

        .shadown{
            width: 200px;
            height: 100px;
            background-color: yellow;
            /*水平 垂直 模糊 外延（可选）颜色*/
            box-shadow: 4px 2px 2px 3px blue;
            /*层叠背景*/
        }
        .trans{
            width: 300px;
            height: 20px;
        background: linear-gradient(to top,blue,red,white,black);
            /*线性渐变*/

            /*background: radial-gradient(red,yellow);*/
            /*径向渐变， 重内向外*/
            /*45deg:这个的意思是角度的问题;*/
        }

        .box3{
            width: 500px;
            height: 500px;
            background-color:yellowgreen;
        }
        .box3-1{
            width: 100px;
            height: 200px;
            background-color: red;
            /*transform: translate(50px,100px);*/
            /*平移*/
            /*浏览器前缀*/
            /*-webkit-transform: translate(50px,100px);*/
            /*-moz-transform: translate(50px,100px);*/
            /*-ms-transform: translate(50px,100px);*/
            /*-o-transform: translate(50px,100px);*/
            /*浏览器前缀，有些浏览器不支持所以这样*/

            /*transform: rotate(45deg);*/
            /*旋转45度*/
            /*transform: skew(0deg,45deg);*/
            /*拉扯45度*/
            /*transition: all 2.5s  linear ;*/
            transition: all 2.5s linear;
            /*上面这句如果放在hover里面就会不点的时候就会很快的缩小，*/
            /*放在这里面是慢慢的缩小*/
            animation: mu 9s infinite linear;
        }
        .box3-1:hover{
            transform-origin: 377px 610px;

            transform:rotate(50deg);
        }
        .box3:hover .box3-1{
            transform-origin: 377px 610px;
            transform:rotate(50deg);
            /*transform: skew(0deg,45deg);*/
            transform: scale(1.5);
            /*transform: rotate(360deg);*/
            /*放大1.5倍*/

        }
        .anni{
            width: 200px;
            height: 200px;
            animation: myAnimation 4s 3 linear;
            /*animation: myAnimation 4s infinite linear;*/
            /*制作动画效果  一次运行4秒3次重复*/
            /*infinite linear 是无限循环*/
        }
        @keyframes mu {
            from{
                /*transform:rotate(360deg);*/
                transform: skew(0deg,45deg)
            }
            to{
                background: linear-gradient(to left,greenyellow,yellow);
                transform: skew(360deg,0deg)
            }
        }
        @keyframes myAnimation {
         /*   from{
                background-color: blue;
            }
            to{
                background-color: red;
            }*/
            /*from to 重蓝色到红色*/


            0%{
                background-color: red;
            }
            20%{
                background-color: yellow;
            }
            40%{
                background-color: orange;
            }
            60%{
                background-color: green;
            }
            80%{
                background-color: #ccc;
            }
            100%{
                background-color: #000;
            }
        }



        .div1{
            /*box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。*/

            /*content-box，border和padding不计算入width之内*/

            /*padding-box，padding计算入width内*/

            /*border-box，border和padding计算入width之内，其实就是怪异模式了~*/
            box-sizing:border-box;
            -moz-box-sizing:border-box;	/* Firefox */
            -webkit-box-sizing:border-box;	/* Safari */
            width: 50px;
            height: 60px;
            padding: 20px;
            float:left;
            background-color: red;
            border: 1px solid red;
        }

    </style>
    <link rel="stylesheet" href="zuoyou.css"/>
</head>
<body>


<p>天啊测试测试测试 </p>
<p>hellow hellow hellow HEloow</p>
<a href="#">这是一个A标记</a>


<div class="box1"></div>

<div class="box2"></div>


<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ul>

<h1 class="way1">
    <a href="#">百度</a>
</h1>
<!--图片替换技术-->

<h1 class="way2">
    <a href="#">千百度</a>
</h1>


<div class="AA"><h1><a href="#">!Y喜欢</a></h1></div>
<!--首行缩进-->

<div class="pre"></div>


<div class="rad"></div>

<div class="shadown"></div>

<div class="trans"></div>

<div class="box3">
    <div class="box3-1"></div>
</div>

<div class="anni"></div>

<div class="div1"></div>

</body>
</html>